'use strict'
import React from "react";
import {render} from 'react-dom';
import {Link} from 'react-router';
//引入工具类
import MMALL_COM from 'util/comm.jsx';
import PRUDUCT from 'service/product_service.jsx';

//引入依赖页面
import PageTitle from 'page/component/page-title/index.jsx';
import Pagination from 'page/component/pagination/index.jsx';


//引入样式文件
import './index.scss';
var _comm    = new MMALL_COM();
var _product = new PRUDUCT();
class ProductIndex extends React.Component{
    constructor(props){
        super(props);
        this.state={
            list         : [],
            listType     : 'list',
            searchType   : 'productId',
            searchKeyword: '',
            pageNum      : 1,
            pageSize     : 10
        }
        //绑定this
        this.loadeProductList=this.loadeProductList.bind(this);
    }
    componentDidMount(){
        this.loadeProductList();
    }
    //加载商品列表
    loadeProductList(pageNum){
        let listParam={};
        listParam.listType = this.state.listType;
        listParam.pageNum  = pageNum||this.state.pageNum;
        listParam.pageSize = this.state.pageSize||10;
        //按商品名称搜索
        if(this.state.listType==='search'&&this.state.searchType==='productName'){
            listParam.productName=this.state.searchKeyword;
        }
        //按ID搜索
        if(this.state.listType==='search'&&this.state.searchType==='productId'){
            listParam.productId=this.state.searchKeyword;
        }
        //请求商品列表
        _product.getProductList(listParam).then(res=>{
            this.setState(res);
        },
        msg=>{
            _comm.errorTip('出错了,请稍后再试')
        })
    }
    //点击改变页码
    onChangePage(pageNum){
        this.loadeProductList(pageNum);
    }
    //改变搜索类型 id或者产品名称
    onChangeSearchType(e){
        this.setState({
            searchType:e.target.value
        })
    }
    //改变搜索关键词
    onChangeSearchKeyword(e){
        let keyword=e.target.value;
        this.setState({
            searchKeyword:keyword
        })
    }
    //点击搜索按钮
    onClickSearch(e){
        this.setState({
            listType:'search'
        },()=>this.loadeProductList(1))
        
    }
    //改变商品出售状态
    setProductState(productId,productStatus){

        let productInfo={
            productId    : productId,
            status: productStatus==1?0:1
        },
        confirmTip="确认要下架此商品吗"
        console.log(productInfo);
        if(window.confirm(confirmTip)){
            _product.setSaleStatus(productInfo).then(
                res=>{
                    _comm.successTip(res);
                    this.loadeProductList();
                },
                msg=>{
                    _comm.errorTip('出错了，请稍后再试')
                }
            )
        }   
    }

    render(){
        return (
            <div id="page-wrapper">
                <PageTitle pageTitle="商品管理">
                    <div className="page-header-right">
                        <Link className="btn btn-primary" to="/product/save"><i className="fa fa-plus fa-fw"></i>添加商品</Link>
                    </div>
                </PageTitle>
                <div className="row">
                    <div className="search-wrap col-md-12">
                        <div className="form-inline">
                            <div className="form-group">
                                <select className="form-control" onChange={this.onChangeSearchType.bind(this)}>
                                    <option value="productId">按商品id查询</option>
                                    <option value="productName">按商品名称查询</option>
                                </select>
                            </div>
                            <div className="form-group">
                                <input type="text" className="form-control" placeholder="关键词" onChange={this.onChangeSearchKeyword.bind(this)}/>
                            </div>
                            <button type="button" className="btn btn-default" onClick={this.onClickSearch.bind(this)}>查询</button>
                        </div>
                    </div>
                    <div className="table-wrap col-lg-12">
                        <table className="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>id</th>
                                    <th>信息</th>
                                    <th>价格</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                            {/*渲染商品*/}
                                {
                                    this.state.list.length>0?this.state.list.map((product,index)=>{
                                        return (
                                            <tr key={index}>
                                                <td>{product.id}</td>
                                                <td>
                                                    <p>{product.name}</p>
                                                    <p>{product.subtitle}</p>
                                                </td>
                                                <td>{product.price}</td>
                                                <td>
                                                    <span>{product.status===1?'在售':'已下架'}</span>
                                                    <a className="btn btn-xs btn-warning opear" data-status={product.status}
                                                        onClick={this.setProductState.bind(this,product.id,product.status)}>
                                                        {product.status===1?'下架':'上架'}
                                                    </a>
                                                </td>
                                                <td>
                                                    <Link className = 'opear' to = {'/product/detail/'+product.id}>查看</Link>
                                                    <Link className = 'opear' to = {'/product/save/'+product.id}>编辑</Link>
                                                </td>
                                            </tr>
                                        )
                                    }): (
                                        <tr>
                                            <td colSpan="5" className="text-center">暂无结果~</td>
                                        </tr>
                                    )
                                }       
                            </tbody>
                        </table>
                    </div>
                    {/*引入分页插件，渲染分页*/}
                    {this.state.pages>1?<Pagination onChange={this.onChangePage.bind(this)} current={this.state.pageNum} total={this.state.total}  showLessItems />:""}
                </div>
            </div>
        )
    }
}
export default ProductIndex;
